.tn-tc-fields__image-container{ class: f.object.stretch_to_fill? ? 'tn-tc-fields__image-container--stretch' : '', data: { asset_thumbnail: true } }
  = f.hidden_field :image_id, data: { asset_id_field: true }
  = f.hidden_field :position
  = f.hidden_field :size
  = f.hidden_field :stretch_to_fill

  - if f.object.image
    = backend_piece_image_tag(f.object)
  - else
    = link_to(new_item_asset_path, class: 'tn-tc-fields__add-image', data: { 'modal-remote' => true, 'modal-title' => "Select Image", 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment' }) do
      %span Add Image

  = f.super_text_area :caption, class: 'tn-tc-fields__caption', placeholder: 'Enter caption here...', data: { image_caption: true }, style: ("display: none;" unless f.object.show_caption)
  = f.hidden_field :show_caption

  .medium-editor-toolbar-form-anchor.link-form{ style: 'position: absolute; z-index: 10;' }
    = f.super_text_field :link_url, placeholder: 'Paste or type a link', style: 'display; inline; width: 316px;';

    = link_to '#', class: 'medium-editor-submit medium-editor-toolbar__action', title: 'Cancel', data: {  tooltip: true  } do
      %i.material-icon.material-icon--smaller-on-min check_circle

    = link_to '#', class: 'medium-editor-cancel medium-editor-toolbar__action', title: 'Cancel', data: {  tooltip: true  } do
      %i.material-icon.material-icon--smaller-on-min cancel

    = link_to new_item_asset_path(hide_upload: true), class: 'medium-editor-toolbar__action', 'title' => 'Link to an Asset', 'data-modal-remote' => 'true', 'data-modal-handler' => 'Tenon.features.tenonContent.ImageAssetLink', 'data-modal-title' => 'Link to Asset', 'data-tooltip' => true do
      %i.material-icon.material-icon--smaller-on-min photo


  .medium-editor-toolbar.medium-editor-toolbar-active.image-controls{ style: "display: none; margin-top: -65px;" }
    %ul.medium-editor-toolbar-actions.clearfix
      %li
        %button{ title: 'Crop', class: 'asset-crop medium-editor-toolbar__action medium-editor-button-first', data: { 'tooltip' => true, 'post-crop-handler' => 'Tenon.features.tenonContent.PostCropHandler', 'asset-id' => f.object.image_id, 'base-assets-path' => assets_path } }
          %i.material-icon.material-icon--smaller-on-min crop
      %li
        %button{ title: 'Grow', class: 'grow-image medium-editor-toolbar__action', data: { 'column-resize-operation' => 'increase', 'tooltip' => true } }
          %i.material-icon.material-icon--smaller-on-min add
      %li
        %button{ title: 'Shrink', class: 'shrink-image medium-editor-toolbar__action', data: { 'column-resize-operation' => 'decrease', 'tooltip' => true } }
          %i.material-icon.material-icon--smaller-on-min remove
      %li
        %button{ title: 'Toggle Caption', class: 'medium-editor-toolbar__action toggle-caption', data: { tooltip: true } }
          %i.material-icon.material-icon--smaller-on-min comment
      %li
        %button{ title: 'Swap Sides', class: 'swap-sides medium-editor-toolbar__action', data: { tooltip: true } }
          %i.material-icon.material-icon--smaller-on-min compare_arrows
      %li
        %button{ title: 'Stretch to Fill', class: "stretch-to-fill medium-editor-toolbar__action #{ f.object.stretch_to_fill? ? 'medium-editor-button-active' : '' }", data: { tooltip: true } }
          %i.material-icon.material-icon--smaller-on-min aspect_ratio
      %li
        %button.add-link.medium-editor-toolbar__action{ title: 'Add Link', class: ('medium-editor-button-active' unless f.object.link_url.blank?), data: { tooltip: true } }
          %i.material-icon.material-icon--smaller-on-min link
      %li
        %button{ href: new_item_asset_path, title: 'Replace Image', class: 'replace-image medium-editor-toolbar__action  medium-editor-button-last', data: { 'modal-remote' => 'true', 'modal-title' => "Select Image", 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment', 'tooltip' => true } }
          %i.material-icon.material-icon--smaller-on-min photo_library

    .medium-editor-toolbar-form-anchor

